<template>
  <a-modal
    :visible="visible"
    :mask-closable="false"
    width="70vw"
    :title="props.title"
    :title-align="'start'"
    :closable="false"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <div class="module-con">
      <div class="module-title">基本信息</div>
      <a-form
        ref="formRef"
        :model="form"
        layout="vertical"
        :rules="rules"
        @submit="handleSubmit"
      >
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="invoiceNo" label="发票号">
              <a-input v-model="form.invoiceNo" placeholder="请输入发票号" />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceDecimal" label="发票份数">
              <a-input
                v-model="form.invoiceDecimal"
                placeholder="请输入发票份数"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceCode" label="发票代码">
              <a-input v-model="form.invoiceCode" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="name" label="发票业务类型">
              <a-input v-model="form.name" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="billType" label="单据类型">
              <a-select
                v-model="form.billType"
                :options="optionsList"
                allow-clear
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceType" label="发票类型">
              <a-select
                v-model="form.invoiceType"
                :options="optionsList"
                allow-clear
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="currencyType" label="币种">
              <a-select
                v-model="form.currencyType"
                :options="optionsList"
                allow-clear
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="taxRate" label="税率(%)">
              <a-select
                v-model="form.taxRate"
                :options="optionsList"
                allow-clear
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="exchangeRate" label="汇率">
              <a-input v-model="form.exchangeRate" placeholder="请输入汇率" />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceFlag" label="蓝票/红票">
              <a-select
                v-model="form.invoiceFlag"
                :options="optionsList"
                allow-clear
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="isSubtract" label="是否补价差">
              <a-select
                v-model="form.isSubtract"
                :options="optionsList"
                allow-clear
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceExchange" label="冲抵发票">
              <a-input v-model="form.invoiceExchange" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="supplierCode" label="供应商编码">
              <searchItem
                v-model:value="form.supplierCode"
                :name="'name'"
                :table-obj="tableObj"
                :title="'类别'"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierName" label="供应商名称">
              <a-input
                v-model="form.supplierName"
                placeholder="请输入供应商名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierSbh" label="供应商纳税人识别号">
              <a-input
                v-model="form.supplierSbh"
                placeholder="请输入供应商纳税人识别号"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierBack" label="供应商开户行">
              <a-input
                v-model="form.supplierBack"
                placeholder="请输入供应商开户行"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="supplierBack" label="供应商银行账号">
              <a-input
                v-model="form.supplierBack"
                placeholder="请输入供应商银行账号"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierDzdh" label="供应商地址电话">
              <a-input
                v-model="form.supplierDzdh"
                placeholder="请输入供应商地址电话"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceUserName" label="开票人">
              <a-input
                v-model="form.invoiceUserName"
                placeholder="请输入开票人"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceDate" label="开票日期">
              <a-date-picker v-model="form.invoiceDate" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="batchLotNo" label="批架次">
              <a-input v-model="form.batchLotNo" placeholder="请输入批架次" />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="commodityBillTaxAmount"
              label="货物发票总金额（含税）"
            >
              <a-input
                v-model="form.commodityBillTaxAmount"
                placeholder="请输入货物发票总金额"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="commodityBillAmount"
              label="货物发票总金额（不含税）"
            >
              <a-input
                v-model="form.commodityBillAmount"
                placeholder="请输入货物发票总金额"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="commodityBillTaxPrice" label="贷款发票总税额">
              <a-input
                v-model="form.commodityBillTaxPrice"
                placeholder="请输入贷款发票总税额"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="agencyFee" label="代理费">
              <a-input v-model="form.agencyFee" placeholder="请输入代理费" />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="agencyFeeTax" label="代理费税额（%）">
              <a-input
                v-model="form.agencyFeeTax"
                placeholder="请输入代理费税额"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="agencyFeeTax" label="代理费税额">
              <a-input
                v-model="form.agencyFeeTax"
                placeholder="请输入代理费税额"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="transportSundryMoney" label="运杂费">
              <a-input v-model="form.transportSundryMoney" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="name" label="非订单税额（%）">
              <a-input v-model="form.name" placeholder="请输入非订单税额" />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="transportSundryMoneyTax" label="运杂费税额">
              <a-input
                v-model="form.transportSundryMoneyTax"
                placeholder="请输入运杂费税额"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="invoiceTaxAmount"
              label="发票合计金额（本币含税）"
            >
              <a-input v-model="form.invoiceTaxAmount" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="invoiceAmount"
              label="发票合计金额（本币不含税）"
            >
              <a-input v-model="form.invoiceAmount" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="invoiceTaxPrice" label="发票总税额">
              <a-input v-model="form.invoiceTaxPrice" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="operatorUserName" label="编制人姓名">
              <a-input v-model="form.operatorUserName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="operatorUserDeptName" label="编制人部门">
              <a-input v-model="form.operatorUserDeptName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="operatorDate" label="编制日期">
              <a-input v-model="form.operatorDate" disabled />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="module-title">信息列表</div>
      <a-button type="primary" style="margin-bottom: 16px" @click="handleAdd"
        >添加</a-button
      >
      <a-table :columns="columns" :scroll="scroll" :data="data">
        <template #optional="{ record }">
          <span class="btn-class" @click="deleteCloumns(record)">删除</span>
        </template>
      </a-table>
    </div>
    <chooseModule
      v-if="chooseModuleShow"
      @handleChooseOk="handleChooseOk"
    ></chooseModule>
  </a-modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import searchItem from '@/common/components/search-modal/index.vue';
  import invoiceDetailTableAdd from '../table-comp/invoice-detail-table-add';
  import chooseModule from './choose-module.vue';

  const props = defineProps(['title']);
  const columns = ref([]);
  const data = ref([]);
  const chooseModuleShow = ref(false);
  const form = reactive({
    name: '',
    invoiceNo: '',
    invoiceDecimal: '',
    invoiceCode: '',
    billType: '',
    invoiceType: '',
    currencyType: '',
    taxRate: '',
    exchangeRate: '',
    invoiceFlag: '',
    isSubtract: '',
    invoiceExchange: '',
    supplierCode: '',
    supplierName: '',
    supplierSbh: '',
    supplierBack: '',
    supplierDzdh: '',
    invoiceUserName: '',
    invoiceDate: '',
    batchLotNo: '',
    commodityBillTaxAmount: '',
    commodityBillAmount: '',
    commodityBillTaxPrice: '',
    agencyFee: '',
    agencyFeeTax: '',
    transportSundryMoney: '',
    transportSundryMoneyTax: '',
    invoiceTaxAmount: '',
    invoiceAmount: '',
    invoiceTaxPrice: '',
    operatorUserName: '',
    operatorUserDeptName: '',
    operatorDate: '',
  });
  const formRef = ref();
  const rules = {
    invoiceNo: [
      {
        required: true,
        message: '请输入发票号',
      },
    ],
    invoiceDecimal: [
      {
        required: true,
        message: '请输入发票份数',
      },
    ],
    taxRate: [
      {
        required: true,
        message: '请选择税率',
      },
    ],
    exchangeRate: [
      {
        required: true,
        message: '请输入汇率',
      },
    ],
    supplierCode: [
      {
        required: true,
        message: '请选择供应商',
      },
    ],
    commodityBillTaxAmount: [
      {
        required: true,
        message: '请输入货物发票总金额',
      },
    ],
    commodityBillAmount: [
      {
        required: true,
        message: '请输入货物发票总金额',
      },
    ],
  };
  const scroll = {
    x: 2000,
    y: 200,
  };
  const tableObj = reactive({
    api: '/api/',
    renderConfig: {
      name: {
        label: '名称',
        field: 'name',
        componentName: 'input',
      },
      sex: {
        label: '性别',
        field: 'sex',
        componentName: 'select',
        componentProps: {
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 2 },
          ],
        },
      },
      age: {
        label: '年龄',
        field: 'age',
        componentName: 'inputNumber',
      },
      birthday: {
        label: '生日',
        field: 'birthday',
        componentName: 'timePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
        },
      },
    },
    renderKeys: ['name', 'sex', 'age', 'birthday'],
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Salary',
        dataIndex: 'salary',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ],
  });
  const optionsList = [
    { label: '单表', value: 1 },
    { label: '单表2', value: 2 },
  ];
  const visible = ref(true);
  const emit = defineEmits(['handleOk', 'handleCancel', 'update:modelValue']);
  const handleChooseOk = () => {
    chooseModuleShow.value = false;
  };
  const handleSubmit = () => {
    formRef.value.validate(async (validate) => {
      if (!validate) {
        console.log('0000');
        visible.value = false;
        emit('update:modelValue', false);
      }
    });
  };
  const handleCancel = () => {
    formRef.value.resetFields();
    emit('update:modelValue', false);
  };
  const deleteCloumns = (val) => {
    console.log(val);
  };
  const handleAdd = () => {
    chooseModuleShow.value = true;
  };
  data.value = [{ salary: '00' }];
  columns.value = invoiceDetailTableAdd;
  const formValidate = () => {
    formRef.value.validate();
  };
  defineExpose({ formValidate });
</script>

<style lang="less" scoped>
  .module-con {
    height: 70vh;
  }

  .module-title {
    margin: 0 0 20px;
    padding-left: 12px;
    color: #1e2228;
    font-weight: 600;
    font-size: 16px;
    border-left: 6px solid #1e89ff;
  }

  .btn-class {
    color: #1e89ff;
    cursor: pointer;
  }
</style>
